<template>
  <div class="m-home">
    <el-container>
      <el-header>
        <headerVue />
      </el-header>
      <el-container>
        <el-aside v-aside="isCollapse">
          <asideVue />
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import asideVue from './components/aside.vue';
import headerVue from './components/header.vue';
import { provide, ref } from 'vue';
// 控制侧边栏内容显隐
const isCollapse = ref(false);
provide('isCollapse', isCollapse); //依赖注入
// 控制侧边栏宽度
const vAside = {
  updated(el: any, binding: any) {
    if (binding.value) {
      el.style.width = '64px';
    } else {
      el.style.width = '';
    }
  },
};
</script>

<style scoped lang="less">
.m-home {
  height: 100%;
  :deep(.el-header) {
    height: 70px;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  :deep(.el-aside) {
    max-width: 249px;
    height: calc(100vh - 70px);
    transition: all 0.3s ease-in-out;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  :deep(.el-main) {
    height: calc(100vh - 70px);
    padding-bottom: 0;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  :deep(.el-menu) {
    height: 100%;
    border-right: 1px solid #304156;
  }
}
</style>
